<template>


  <!--  外层容器-->
  <el-container style="height: 100%;">



    <!--    头部-->
    <el-header >

      <!--logo 部分-->
      <div class="layout-aside" >
        <div class="layout-logo">
          <router-link to="/index">
            <!--logo图标-->
<!--            <img src="@/assets/images/ico/logo.png" alt="logo"/>-->
            <!--<img src="@/assets/images/ico/logo.gif" alt="logo"/>-->
            <span>{{sysName}}</span>
          </router-link>
        </div>
      </div>

      <!--页面头部-->
      <Header></Header>
    </el-header>


    <el-container style="height: calc(100% - 60px)">
      <!--    侧边栏容器-->
      <el-aside width="200px" style="background-color: #304156">
        <!--
        默认打开,router 则开启路由
        unique-opened 是否只保持一个子菜单的展开
        -->
        <el-menu
          background-color="#1F2D3D"
          text-color="#BFCBD9"
          unique-opened
          active-text-color="#409EFF"
          :default-active="$route.path"
          router @select="handleSelect">

          <el-menu-item index="/index" ><i class="el-icon-s-home" ></i>首页</el-menu-item>

          <!--<el-submenu index="1">-->
          <!--  <template slot="title"><i class="el-icon-user"></i>权限管理</template>-->
          <!--  <el-menu-item index="/index">地区管理</el-menu-item>-->
          <!--  <el-menu-item index="/index">字典管理</el-menu-item>-->
          <!--</el-submenu>-->

          <el-submenu index="2">
            <template slot="title"><i class="el-icon-user"></i>权限管理</template>
            <el-menu-item index="/toAuthorityList">权限</el-menu-item>
            <el-menu-item index="/toRoleList">角色</el-menu-item>
            <el-menu-item index="/toDeptList">部门</el-menu-item>
            <el-menu-item index="/toUserList">用户</el-menu-item>
            <el-menu-item index="/toUnfinished">离职管理</el-menu-item>
          </el-submenu>

          <el-submenu index="12">
            <template slot="title"><i class="el-icon-baseball"></i>技术资产</template>
            <el-menu-item index="/toProductList" ><i class="el-icon-news" ></i>产品管理</el-menu-item>
            <el-menu-item index="/toAppList" ><i class="el-icon-truck" ></i>应用管理</el-menu-item>
            <el-menu-item index="/toComponentList" ><i class="el-icon-connection" ></i>组件管理</el-menu-item>
            <el-menu-item index="/toToolList" ><i class="el-icon-set-up" ></i>工具管理</el-menu-item>
          </el-submenu>


          <!--<el-menu-item index="/toProject" ><i class="el-icon-s-home" ></i>项目管理</el-menu-item>-->

          <el-menu-item index="/toSiteList" ><i class="el-icon-office-building" ></i>现场管理</el-menu-item>

          <el-submenu index="11">
            <template slot="title"><i class="el-icon-fork-spoon"></i>厂商管理</template>
            <el-menu-item index="/toThirdPartyList" ><i class="el-icon-school" ></i>厂商信息</el-menu-item>
            <el-menu-item index="/toThirdPartyUserList" ><i class="el-icon-s-custom" ></i>厂商人员</el-menu-item>
          </el-submenu>

          <el-submenu index="8">
            <template slot="title"><i class="el-icon-s-shop"></i>个人仓库</template>
            <el-menu-item index="/toPersonalPasswordList" ><i class="el-icon-truck" ></i>密码箱</el-menu-item>
          </el-submenu>

          <el-submenu index="9">
            <template slot="title"><i class="el-icon-warning-outline"></i>故障上报</template>
            <el-menu-item index="/toUnfinished">上报</el-menu-item>
            <el-menu-item index="/toUnfinished">待处理</el-menu-item>
            <el-menu-item index="/toUnfinished">待复核</el-menu-item>
          </el-submenu>

          <el-submenu index="10">
            <template slot="title"><i class="el-icon-phone-outline"></i>知识库</template>
            <el-menu-item index="/toProductQuestionList">常见问题</el-menu-item>
            <el-menu-item index="/toOpsKnowledgeList">知识中心</el-menu-item>
          </el-submenu>

          <el-submenu index="7">
            <template slot="title"><i class="el-icon-setting"></i>系统管理</template>
            <el-menu-item index="/toDruid">数据库监控</el-menu-item>
            <el-menu-item index="/toDict">字典配置</el-menu-item>
            <el-menu-item index="/toFileStorageList">文件管理</el-menu-item>
            <el-menu-item index="/toComputerList">全局计算机</el-menu-item>
            <el-menu-item index="/toAccountList">全局环境账号</el-menu-item>
            <el-menu-item index="/toCommonFile">全局常用文件</el-menu-item>
            <el-menu-item index="/toSysConfigList">系统配置</el-menu-item>
            <!--<el-menu-item index="/toAboutUs1">在线人员</el-menu-item>-->
            <el-menu-item index="/toAboutUs">关于我们</el-menu-item>
          </el-submenu>



        </el-menu>
      </el-aside>

      <el-container>
        <!--      主要区域容器-->
        <el-main class="el-main-class">

          <!--引入跳转路由-->
          <router-view ></router-view>

        </el-main>

        <!--        页脚-->
        <!--        <el-footer>Footer</el-footer>-->
      </el-container>

    </el-container>

  </el-container>


</template>

<script>

  import Index from '@/components/home/Index';
  import Header from '@/components/home/Header';
  import setting from '@/config/setting';

  export default {
    // 项目首页入口
    name: "Home",
    data() {
      return {
        // 系统名称
        sysName: setting.sysName,
      }
    },
    components: {
      Index,
      Header,
    },
    methods: {
      /**
       * 选中切换后的处理 /userManagement
       * @param key 调用的路径,比如
       * @param keyPath 数组，索引和调用路径
       */
      handleSelect(key, keyPath){

      },
    },
    // 进入马上执行
    mounted() {

    },
  }
</script>


<style scoped>

  .el-main-class {
    /*主体中间部分的背景颜色,带点灰色*/
    background-color: #f0f2f5;
  }

  /*头部*/
  .el-header {
    background-color: #ffff;
    color: rgb(191, 203, 217);
    /*line-height: 60px;*/
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }
  .el-submenu,.el-menu-item{
    min-width: 200px
  }


  /*logo部分的样式 start */
  .layout-aside {
    position: fixed;
    left: 0;
    top: 0;
    height: 100wh;
    width: 200px;
    transition: all 0.3s;
    background-color: #304156;
  }
  .layout-aside .layout-logo {
    height: 60px;
    background-color: #304156;
  }
  .layout-aside .layout-logo a {
    display: flex;
    width: 100%;
    height: 60px;
    justify-content: center;
    align-items: center;
  }
  .layout-aside .layout-logo img {
    width: 32px;
    height: 32px;
  }
  .layout-aside .layout-logo span {
    font-size: 14px;
    line-height: 60px;
    /*log文字颜色*/
    color: #fff;
    margin-left: 12px;
  }

  /*logo部分的样式 end */

</style>

